<script setup>
import {showConfirmDialog} from 'vant';
import 'vant/es/dialog/style'
import {ref, onBeforeMount} from "vue";
import {codeBtnLoading, codeBtnDisable, codeBtnText, getCode} from '@/views/login/GetMailCode.js'
import {useRouter} from "vue-router";
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";
import {getUserAllInfo, updatePwdAPI, updateUserInfoAPI} from "@/api/user.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import {logoutAPI} from "@/api/logout.js";
import {LOGIN_ROUTE} from "@/router/routes/login/login.js";

const router = useRouter()

const env = import.meta.env
const PHONE_MAX_LEN = Number.parseInt(env.VITE_PHONE_MAX_LEN)

const phone = ref('')
const gender = ref(false)
onBeforeMount(async () => {
  const res = await getUserAllInfo()
  phone.value = res.phone
  gender.value = res.gender ? '1' : '0'
})

const goBack = () => {
  showConfirmDialog({
    message: '是否确认放弃修改信息'
  }).then(() => {
    // on confirm
    router.back()
  }).catch(() => {
    // on cancel
  });
}

const updateUserInfo = () => {
  if (phone.value.length <= 0) {
    elErrorMessageTip('请先完成输入')
    return
  }
  showConfirmDialog({
    message: '是否确认修改信息'
  }).then(async () => {
    // on confirm
    const res = await updateUserInfoAPI(phone.value, gender.value)
    if (res) {
      router.back()
    }
  }).catch(() => {
    // on cancel
  });
}
</script>

<template>
  <div class="update-user-info">
    <van-nav-bar :title="'修改信息'" left-text="返回" left-arrow fixed @click-left="goBack" placeholder/>
    <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        :maxlength="PHONE_MAX_LEN"
        show-word-limit
        clearable
    />
    <van-cell title="性别">
      <template #label>
        <van-radio-group v-model="gender">
          <div class="flex-start-center">
            <van-radio name="1" class="mr-2">男</van-radio>
            <van-radio name="0">女</van-radio>
          </div>
        </van-radio-group>
      </template>
    </van-cell>
    <div class="mt-2 p-2">
      <van-button block
                  round
                  @click="updateUserInfo"
                  color="linear-gradient(to right, #e2ecf7, #14b4f6, #e2ecf7)">
        确认修改信息
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>